
import styles from './index.less';
import { Form, Button, Input, Toast } from 'antd-mobile'
import { useNavigate } from 'umi';
import api from '@/utils/api';
export default function Login() {
  const navigate = useNavigate();
  const userReg = (params: {username: string;pwd: string}) => {
    api.userRegister(params).then(res => {
      if (res.data.code === 0) {
        Toast.show({
          icon: 'success',
          content: '注册成功',
          afterClose: () => {
            navigate('/login', {replace: true})
          }
        })
      } else {
        Toast.show({
          icon: 'fail',
          content: '注册失败',
          
        })
      }
    })
    
  }
  return (
    <Form
      onFinish={userReg}
      footer = {
        <>
          <Button color='primary' block type='submit'>注册</Button>
          <Button color='danger' block type='reset'>重置</Button>
          <Button color='success' onClick={() => {
            navigate('/login')
          }} block>直接登录</Button>
        </>
      }
    >
      <Form.Item label="用户名" name="username" rules={[
        {
          required: true,
          message: '用户名必填'
        },
        {
          pattern: /^[a-zA-Z]\w{3,7}$/,
          message: '用户名必须是4到8位英文数字字母_组成,首字母必须是英文字母'
        }
      ]}>
        <Input/>
      </Form.Item>
      <Form.Item label="密码" name="pwd" rules={[
        {
          required: true,
          message: '密码必填'
        },
        {
          pattern: /^[a-zA-Z]\w{3,7}$/,
          message: '密码必须是4到8位英文数字字母_组成,首字母必须是英文字母'
        }
      ]}>
        <Input type='password'/>
      </Form.Item>
    </Form>
  );
}
